import React from 'react';
// import classnames from 'classnames';
import { observer, inject } from 'mobx-react';
import { WeaUpload, WeaSelect,WeaNewScroll } from 'ecCom';
import { Button, Icon } from 'antd';
import ElectricSignStore from '../../stores/dev/electricSignStore';
export interface ElectricSignProps {
    ElectricSign: ElectricSignStore;
}

@inject('ElectricSign')
@observer
export default class ElectricSign extends React.Component<ElectricSignProps, any>{
    constructor(props) {
        super(props);
        const { ElectricSign } = this.props;
        ElectricSign.init();
    }


    render() {
        const { ElectricSign } = this.props;
        const { signType, selectedFile, selectedFileData: { filename, size }, refresh } = ElectricSign;
        return (
            <WeaNewScroll height={document.body.offsetHeight-50} >
                <div className="cube-dev-electricsign">
                    <h2>签章文件上传</h2>
                    <div className="electrien-singn-container">
                        {
                            selectedFile && <span className="file-upload-list">
                                <span className="list-header">待上传文件</span>
                                <div className="list-item">
                                    <span className="list-item-icon icon-coms-content-o"></span>
                                    <div className="list-item-info">
                                        <div className="info-name">{filename}</div>
                                        <div className="info-size">{(size / 1024).toFixed(2)}K</div>
                                    </div>
                                    <Icon type="cross" title={'删除'} onClick={ElectricSign.deleteFile} />
                                </div>
                            </span>
                        }
                        {
                            <div className="file-container" style={{display:selectedFile ?'none':'block'}}>
                                <span className="file-upload">
                                    <div className="file-upload-icon">
                                        <WeaUpload
                                            key={refresh}
                                            uploadUrl='/api/doc/upload/uploadFile'
                                            category='string'
                                            maxUploadSize={10}
                                            multiSelection={false}
                                            autoUpload={false}
                                            maxFilesNumber={1}
                                            limitType={'doc,docx,xlsx,xls,txt,pdf,jpg,jpeg,png,gif,tiff'}
                                            onChange={ElectricSign.uploadChange}
                                            getShowListDatas={ElectricSign.getShowListDatas}
                                        >
                                            <span className="icon-mode-tianjiawenjian1"></span>
                                        </WeaUpload>
                                    </div>
                                    <div className="file-upload-text">
                                        <div>点击上传附件</div>
                                        <div>(最大10M)</div>
                                    </div>
                                </span>
                                <div className="file-describe-text">
                                    <div>建议纸张尺寸:A4(210mm x 297mm)</div>
                                    <div>支持文件格式: doc、docx、xlsx、xls、txt、pdf、jpg、jpeg、png、gif、tiff</div>
                                </div>
                            </div>
                        }
                        <div className="sign-type">
                            <span>签章类型：</span>
                            <WeaSelect
                                options={[{
                                    key: "1",
                                    selected: true,
                                    showname: "个人签名",
                                }, {
                                    key: "2",
                                    selected: false,
                                    showname: "企业签章"
                                }]}
                                value={signType}
                                viewAttr={2}
                                style={{ width: 210 }}
                                onChange={(v, showname) => {
                                    ElectricSign.changeSignType(v);
                                }}
                            />
                        </div>
                        {ElectricSign.companyvisible&&<div className="sign-type">
                            <span>企业名称：</span>
                            <WeaSelect
                                options={ElectricSign.getOptions()}
                                viewAttr={2}
                                style={{ width: 210 }}
                                onChange={(v, showname) => {
                                    ElectricSign.companyname=showname;
                                }}
                            />
                        </div>}
                        
                        <div className="sign-btn">
                            <Button type="primary" disabled={selectedFile ? false : true} onClick={ElectricSign.toSign}>电子签章</Button>
                        </div>
                    </div>
                </div>
            </WeaNewScroll >
        )
    }
}

